<template>
  <el-popover
    v-model="popoverVisible"
    placement="top-end"
    title="请勾选需要同步编辑的字段"
    width="500"
    trigger="manual"
    class="product-sync-update">
    <div class="container">
      <el-checkbox
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        @change="handleCheckAllChange">
        全选
      </el-checkbox>
      <el-checkbox-group
        v-model="checkedFields"
        @change="handleGroupChange">
        <el-checkbox
          v-for="(item, index) in fieldList"
          :label="item.value"
          :key="index"
          :disabled="item.disabled">
          {{ item.label }}
        </el-checkbox>
      </el-checkbox-group>
    </div>
    <flexbox class="footer">
      <flexbox-item class="desc">
        勾选的字段内容会同步到其他同名产品中
      </flexbox-item>
      <el-button
        size="mini"
        @click="popoverVisible = false">
        取消
      </el-button>
      <el-button
        size="mini"
        type="primary"
        @click="handleConfirm">
        确定
      </el-button>
    </flexbox>
    <div slot="reference">
      <el-checkbox
        v-model="checked"
        @change="handleShowPopover">
        同步修改所有同名产品字段
      </el-checkbox>
    </div>
  </el-popover>
</template>

<script>
export default {
  name: 'ProductSyncUpdate',
  data() {
    return {
      checked: true,
      popoverVisible: false,

      isIndeterminate: true,
      checkAll: false,

      checkedFields: ['productName', 'productType', 'productCompany'],
      fieldList: [
        { label: '产品名称', value: 'productName', disabled: true },
        { label: '产品类别', value: 'productType', disabled: true },
        { label: '产品单位', value: 'productCompany', disabled: true },
        { label: '产品主图', value: 'productPicture' },
        { label: '成本价', value: 'productCostPrice' },
        { label: '市场价', value: 'productMarketPrice' },
        { label: '备注', value: 'remark' },
        { label: '产品详情图', value: 'productPictureImg' }
      ]
    }
  },
  mounted() {
    this.handleConfirm()
  },
  methods: {
    handleShowPopover() {
      this.popoverVisible = !this.popoverVisible
      this.checked = true
    },

    handleCheckAllChange(val) {
      this.checked = true
      const all = this.fieldList.map(o => o.value)
      this.checkedFields = val ? all : ['productName', 'productType', 'productCompany']
      this.handleGroupChange(this.checkedFields)
    },

    handleGroupChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.fieldList.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.fieldList.length
    },

    handleConfirm() {
      this.popoverVisible = false
      this.checked = true
      this.$emit('confirm', this.checkedFields.filter(o => {
        return !['productName', 'productType', 'productCompany'].includes(o)
      }))
    }
  }
}
</script>

<style scoped lang="scss">
  .container {
    .el-checkbox {
      margin-bottom: 10px;
    }
    .footer {
      margin-top: 10px;
      .desc {
        color: #999;
      }
    }
  }

  .el-popover__reference {
    display: inline-block;
    margin-right: 20px;
  }
</style>
